<template>
  <main>
    <div class="a1">
      <p>待支付</p>
      <span>¥</span>
      <i>{{ price }}</i>
    </div>
    <button>立即支付</button>
  </main>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: ["price"],
  components: {},

  computed: {},

  mounted() {},

  methods: {},
};
</script>

<style lang="less" scoped>
main {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 828px;
  height: 98px;
  background: #dfdfdf;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.a1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 24px;
  span {
    font-size: 22px;
  }
  i {
    font-size: 30px;
    color: red;
  }
}
button {
  width: 166px;
  height: 50px;
  background: #ff5b5b;
  border-radius: 26px;
  color: white;
}
p {
  font-size: 24px;
}
</style>
